<template>
  <section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div
      :class="['custorm--modelbox', 'goodscol-show', (custormCurrent == custormIndex)?'drag active':'drag']"
    >
      <div
        v-if="custormItemData.params.isshow == '2'"
        class="noshow"
        v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"
      ></div>
      <div style="background:#F7F7F7">
        <div class>
          <ul class="liveHead">
            <li :class="[custormItemData.liveShow ?'myActive':'']">直播中/预告</li>
            <li  :class="[custormItemData.liveShow ?'':'myActive']">精彩回放</li>
          </ul>
        </div>
        <div class v-if="custormItemData.data.length==0">

          <div class="listWrap">
            <div class="liveImg" :style="{'background-image':`url(${getPath('default_picture.png')})`}">

              <div class="liveTipWrap" >
                <div
                  class="liveTip"
                  style="background:linear-gradient(90deg,rgba(255,67,67,1) 0%,rgba(253,113,55,1) 100%);"
                >
                  <img src="@/assets/live_studio/live3.png" style="width:16px;height:16px" />
                </div>
                <span style="color:#fff">85544人观看</span>
              </div>

            </div>
            <div class>
              <div class="liveRight">
                <div class>
                  <p class="liveTitle">这是直播标题…</p>
                </div>
                <div class>
                  <el-tag
                    size="mini"
                    effect="dark"
                    class="tag"
                    style=" background: linear-gradient(90deg,rgba(255, 67, 67, 1) 0%,rgba(253, 113, 55, 1) 100%);"

                  >已开播</el-tag>

                  <el-tag
                    type="warning"
                    size="mini"
                    effect="dark"
                    style="margin-right:3px"

                  >标签</el-tag>
                  <el-tag
                    type="warning"
                    size="mini"
                    effect="dark"
                    style="margin-right:3px"

                  >标签</el-tag>
                </div>
                <div class="liveMan">
                  <div
                class="livePhoto"
                v-bind:style="{'background-image':`url(${getPath('default_picture.png')})`}"
                  ></div>

                  <div class>
                    <p class="Pone">烘培妹妹</p>
                    <p class="Pone" style="color:rgba(153,153,153,1);">格瑞鲜花蛋糕</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class v-else>
          <div class="listWrap" v-for="(item,index) in  custormItemData.data" :key="index">
            <!-- <div class="liveImg" :style="{'background-image':`url(${getPath('default_picture.png')})`}"> -->
            <div class="liveImg" :style="{'background-image':`url(${item.share_img}) `}">
              <div class="liveTipWrap" v-if="item.status==1">
                <div
                  class="liveTip"
                  style="background:linear-gradient(90deg,rgba(255,67,67,1) 0%,rgba(253,113,55,1) 100%);"
                >
                  <img src="@/assets/live_studio/live3.png" style="width:16px;height:16px" />
                </div>
                <span style="color:#fff">{{item.pv}}人观看</span>
              </div>
              <div class="liveTipWrap" v-else-if="item.status==2">
                <div
                  class="liveTip"
                  style=" background:linear-gradient(90deg,rgba(21,203,21,1) 0%,rgba(86,239,82,1) 100%);"
                >
                  <img src="@/assets/live_studio/live2.png" style="width:16px;height:16px" />
                </div>
                <span style="color:#fff">{{item.start_time}}</span>
              </div>
              <div class="liveTipWrap" v-else>
                <div
                  class="liveTip"
                  style="background:linear-gradient(90deg,rgba(158,158,158,1) 0%,rgba(217,217,217,1) 100%);"
                >
                  <img src="@/assets/live_studio/live1.png" style="width:16px;height:16px" />
                </div>
                <span style="color:#fff">回放 {{item.pv}}人观看</span>
              </div>
            </div>
            <div class>
              <div class="liveRight">
                <div class>
                  <p class="liveTitle">{{item.name}}</p>
                </div>
                <div class>
                  <el-tag
                    size="mini"
                    effect="dark"
                    class="tag"
                    style=" background: linear-gradient(90deg,rgba(255, 67, 67, 1) 0%,rgba(253, 113, 55, 1) 100%);"
                    v-if="item.status==1"
                  >已开播</el-tag>
                  <el-tag
                    size="mini"
                    effect="dark"
                    class="tag"
                    style="background:linear-gradient(90deg,rgba(21,203,21,1) 0%,rgba(86,239,82,1) 100%);"
                    v-else-if="item.status==2"
                  >未开播</el-tag>
                  <el-tag
                    size="mini"
                    effect="dark"
                    class="tag"
                    v-else
                    style="background:linear-gradient(90deg,rgba(158,158,158,1) 0%,rgba(217,217,217,1) 100%);"
                  >已结束</el-tag>
                  <el-tag
                    type="warning"
                    size="mini"
                    effect="dark"
                    style="margin-right:3px"
                    v-for="(tag,ind) in item.labels"
                    :key="ind"
                  >{{tag}}</el-tag>
                </div>
                <div class="liveMan">
                  <!-- <div
                class="livePhoto"
                v-bind:style="{'background-image':`url(${getPath('default_picture.png')})`}"
                  ></div>-->
                  <div class="livePhoto" v-bind:style="{'background-image':`url(${item.logo})`}"></div>
                  <div class>
                    <p class="Pone">{{item.shop_name}}</p>
                    <p class="Pone" style="color:rgba(153,153,153,1);">{{item.sub_title}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="btn-edit-del"
        @click="delCurrent"
      ><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
  </section>
</template>

<script>
import defaultConfig from "./utils/showConfig";
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function () {
        return defaultConfig;
      },
    },
  },

  mounted() {
    console.log("-----------------------");
    console.log(this.defaultConfig);
    console.log(this.custormItemData);
    this.custormItemData.data=this.custormItemData.liveData;
  },
};
</script>

<style  lang="scss" scoped>
.myActive {
  color: #333333 !important;
  font-size: 18px;
  margin:0 16px;

  	font-family: PingFang SC;
		font-weight: bold;

}
.liveHead {
  overflow: hidden;
  padding: 16px;
  padding-bottom: 0px;
  & > li {
    float: left;
    color: #999999;
    line-height: 18px;

    height: 24px;
  }
}
.Pone {
  width: 100px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}
.listWrap {
  margin: 16px;
  margin-bottom: 0;
  padding: 8px;
  background-color: #ffffff;
  display: flex;
}
.tag {
  width: 50px;
  height: 20px;
  border: none;
  line-height: 20px;
  border-radius: 4px;
}
.liveImg {
  min-width: 140px;
  height: 100px;
  border-radius: 6px;
  margin-right: 16px;
  float: left;
background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;


}
.liveRight {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100px;
}
.liveTipWrap {
  background-color: rgba($color: #000000, $alpha: 0.4);
  border-radius: 17px;
  display: flex;
  width: 120px;
  margin: 5px;
}
.liveTip {
  width: 24px;
  height: 16px;
  text-align: center;
  margin-right: 4px;
  border-radius: 16px 0px 17px 16px;
}
.liveTitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.livePhoto {
  width: 36px;
  height: 36px;
  min-width: 36px;
  margin-right: 8px;
  border-radius: 50%;
}
.liveMan {
  display: flex;
  margin-top: 16px;
}
</style>
